<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .container {
    display: flex;
    height: 600px;
    background-color: rgb(219, 219, 219);
  }

  .container {
    /* justify-content: flex-start; 1,2,3靠左对齐 */
    /* justify-content: flex-end;  1,2,3 靠右对齐*/
    /* justify-content: center; 1,2,3中间对其*/
    /* justify-content: space-between;  // 1,3在两边 2 中间*/
    /* justify-content: space-around;   1,2,31,2  2,3  中间的间隔是两边的间隔的两倍*/
    justify-content: space-evenly;
    /* 各个的间隔是一样的 */
    /* flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向)
flex-end   靠着main-end对齐//参考常见术语(一般是右方向)
center     靠着主轴居中对齐//一般就是居中对齐
space-between 两端对齐，靠着容器壁，剩余空间平分
space-around  分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
space-evenly  平均对齐，不靠着容器壁，剩余空间平分
 */
  }

  .item {
    padding: 100px;
  }
</style>

<body>
  <div class="container">
    <div class="item" style="background-color: antiquewhite;">1</div>
    <div class="item" style="background-color: aqua;">2</div>
    <div class="item" style="background-color: aquamarine;">3</div>
  </div>
</body>

</html>